<template>
  <view class="pending-data-section">
    <view class="section-header">
      <text class="section-title">待处理数据</text>
      <text class="section-subtitle">{{ getCurrentDate() }}</text>
    </view>
    
    <view class="data-grid">
      <view 
        v-for="(item, index) in pendingDataStats" 
        :key="index" 
        class="data-item"
        @click="handleDataClick(item)"
      >
        <view class="data-header">
          <view :class="['data-icon', item.iconClass]"></view>
          <view class="data-info">
            <text class="data-label">{{ item.label }}</text>
            <text class="data-desc">{{ item.description }}</text>
          </view>
        </view>
        <view class="data-content">
          <view class="data-number">{{ item.count }}</view>
          <view class="data-unit">{{ item.unit }}</view>
        </view>
        <view class="data-footer">
          <text class="data-trend" :class="item.trendClass">{{ item.trend }}</text>
          <text class="data-time">{{ item.updateTime }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const emit = defineEmits(['refresh', 'detail'])

const pendingDataStats = ref([])

// 获取当前日期
const getCurrentDate = () => {
  const now = new Date()
  const month = now.getMonth() + 1
  const day = now.getDate()
  return `${month}月${day}日`
}

// 获取待处理数据统计
const loadPendingDataStats = async () => {
  try {
    // 暂时使用模拟数据
    pendingDataStats.value = [
      {
        label: '异常单',
        description: '需要处理的异常工单',
        count: 23,
        unit: '个',
        iconClass: 'icon-abnormal',
        type: 'abnormal',
        trend: '较昨日 +5',
        trendClass: 'trend-up',
        updateTime: '10分钟前'
      },
      {
        label: '待登记',
        description: '等待登记的车辆信息',
        count: 15,
        unit: '辆',
        iconClass: 'icon-register',
        type: 'register',
        trend: '较昨日 -2',
        trendClass: 'trend-down',
        updateTime: '5分钟前'
      },
      {
        label: '待核验',
        description: '需要核验的申请单据',
        count: 8,
        unit: '份',
        iconClass: 'icon-verify',
        type: 'verify',
        trend: '较昨日 +1',
        trendClass: 'trend-up',
        updateTime: '2分钟前'
      }
    ]
  } catch (error) {
    console.error('获取待处理数据统计失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    })
  }
}

// 处理数据项点击
const handleDataClick = (item) => {
  console.log('点击数据项:', item)
  emit('detail', item.type, item)
}

// 查看详情
const viewDetail = (type) => {
  uni.navigateTo({
    url: `/pages/data-summary/detail/pending-data?type=${type}`
  })
}

// 刷新数据方法（供父组件调用）
const refreshData = async () => {
  await loadPendingDataStats()
  emit('refresh')
}

// 暴露方法给父组件
defineExpose({
  refreshData
})

onMounted(() => {
  loadPendingDataStats()
})
</script>

<style scoped>
.pending-data-section {
  margin-bottom: 30rpx;
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8rpx;
  left: 0;
  width: 60rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 2rpx;
}

.section-subtitle {
  font-size: 28rpx;
  color: #999;
  background: #f8f9fa;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  border: 1rpx solid #e9ecef;
}

.data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20rpx;
}

.data-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  border: 1rpx solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.data-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.data-item:active {
  transform: scale(0.98);
}

.data-item:hover::before {
  left: 100%;
}

.data-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.data-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.data-info {
  flex: 1;
}

.data-label {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.data-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.data-content {
  display: flex;
  align-items: baseline;
  margin-bottom: 16rpx;
}

.data-number {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-right: 8rpx;
}

.data-unit {
  font-size: 24rpx;
  color: #666;
}

.data-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-trend {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-weight: 500;
}

.trend-up {
  color: #52c41a;
  background: rgba(82, 196, 26, 0.1);
}

.trend-down {
  color: #ff4d4f;
  background: rgba(255, 77, 79, 0.1);
}

.data-time {
  font-size: 22rpx;
  color: #999;
}

/* 图标样式 */
.icon-abnormal {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
}

.icon-register {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
}

.icon-verify {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
}

/* 响应式设计 */
@media (min-width: 750rpx) {
  .data-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .data-item {
    padding: 20rpx;
  }
  
  .data-number {
    font-size: 40rpx;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.data-item {
  animation: fadeInUp 0.4s ease-out;
}

.data-item:nth-child(2) {
  animation-delay: 0.1s;
}

.data-item:nth-child(3) {
  animation-delay: 0.2s;
}
</style>